<template>
  <div class="scroll-wrapper" ref="scrollList" @scroll="rememberScroll">
    <van-pull-refresh
      v-model="refreshing"
      success-text="刷新成功！"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          :to="`/article/${item.art_id.toString()}`"
          v-for="item in list"
          :key="item.art_id.toString()"
        >
          <!-- 新闻列表item模版 -->
          <div class="article_item">
            <h3 class="van-ellipsis">
              {{ item.title }}
            </h3>
            <div class="img_box" v-if="item.cover.type !== 0">
              <van-image
                lazy-load
                v-for="(img, i) in item.cover.images"
                :key="i"
                :class="item.cover.type === 1 ? 'w100' : 'w33'"
                fit="cover"
                :src="img"
              >
                <!-- 给图片添加loading -->
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <!-- 图片加载失败显示 -->
                <template v-slot:error>加载失败</template>
              </van-image>
              <!-- <van-image
                      class="w33"
                      fit="cover"
                      src="https://img.yzcdn.cn/vant/cat.jpeg"
                    />
                    <van-image
                      class="w33"
                      fit="cover"
                      src="https://img.yzcdn.cn/vant/cat.jpeg"
                    /> -->
            </div>
            <div class="info_box">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relTimes }}</span>
              <span
                v-if="$store.state.user.token"
                @click.stop="openMore(item.art_id.toString())"
                class="close"
                ><van-icon name="cross"></van-icon
              ></span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 弹出层 -->
    <MoreAction
      v-model="showMore"
      @dislike="dislikeCallback"
      :articleId="articleId"
    />
  </div>
</template>

<script>
// 导入获取新闻的后台接口
import { aritcles } from '../../api/article'
// 导入更多操作组件
import MoreAction from './components/moreAction'
export default {
  components: {
    MoreAction
  },
  props: {
    // 当前频道ID
    channelId: {
      type: Number,
      default: 0
    }
  },
  // // 被缓存组件再次被打开时执行
  // activated () {
  //   console.log('被缓存组件再次被打开时执行')
  //   this.scrollToList()
  // },
  created () {
    console.log('at', this.$parent)
  },
  mounted () {
    console.log('atc')
  },
  data () {
    return {
      // 文章列表的数据
      list: [],
      // 列表加载状态=》true：加载中 ｜ false: 加载完成
      loading: false,
      // 列表数据是否加载完毕
      finished: false,
      // 是否是刷新状态
      refreshing: false,
      // 获取历史新闻的时间起点(分页起点)
      timestamp: +new Date(),
      // 保存滚动位置
      scrollTop: 0,
      // 显示更多操作弹层
      showMore: false,
      // 当前文章ID
      articleId: ''
    }
  },
  methods: {
    // 子组件不喜欢某个文章的时候执行它删除
    dislikeCallback () {
      /**
       * 1. 当前点击ID
       * 2. 根据ID删除列表数据=》splice => 删除指定索引的数据
       */
      // 获取当前不喜欢的文章在列表中的索引位置
      const curIndex = this.list.findIndex((item) => item.art_id.toString() === this.articleId)
      // 根据索引删除不喜欢的文章数据
      this.list.splice(curIndex, 1)
    },
    // 打开更多操作
    openMore (id) {
      this.articleId = id
      // 打开更多操作
      this.showMore = true
    },
    // 记录列表滚动位置
    rememberScroll (e) {
      // console.log('滚动位置：', e.target.scrollTop)
      this.scrollTop = e.target.scrollTop
    },
    // 滚动到指定的位置
    scrollToList () {
      console.log('滚到到：', this.scrollTop)
      this.$nextTick(() => {
        this.$refs.scrollList.scrollTop = this.scrollTop
      })
    },
    // 后期替换成真是接口调用
    // 上拉加载更多原理：每次滚动到底部，加载下一页数据
    // 执行时机：滚动条到底部时触发
    async onLoad () {
      // 调用插件方法
      // await this.$sleep()
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 每次添加10条数据=》相当于后台请求，每次获取指定数量的数据
      // eslint-disable-next-line camelcase
      const { data: { results, pre_timestamp } } = await aritcles(this.channelId, this.timestamp)
      console.log(results, pre_timestamp)
      // 根据后台返回数据给列表追加数据
      this.list.push(...results)
      // 关闭刷新并提示成功
      if (this.refreshing) {
        this.refreshing = false
      }

      // 数据请求完=》加载状态结束
      this.loading = false

      // 数据全部加载完成
      // eslint-disable-next-line camelcase
      if (!pre_timestamp) {
        // pre_timestamp没有返回值=》说明没有数据了
        this.finished = true
      } else {
        // pre_timestamp有返回值=》还有数据
        // eslint-disable-next-line camelcase
        this.timestamp = pre_timestamp
      }
    },
    // 触发时机：向下拖拽列表，手松开后
    onRefresh () {
      console.log(this.refreshing)
      // 清空列表数据=》恢复为默认状态
      if (this.refreshing) {
        this.list = []
      }
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      // 重置时间戳为当前时间
      this.timestamp = +new Date()
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
// 新闻item
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
